<template>
  <div>
    <div>
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>
      </baidu-map>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 7,
      BMap: null,
      map: null,
      address: "",
      location: {},
      orderInfo: {},
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      map.enableScrollWheelZoom(true);
      var point = new BMap.Point(
        this.location.sendLocation.split(",")[0],
        this.location.sendLocation.split(",")[1]
      );
      var point1 = new BMap.Point(
        this.location.receiveLocation.split(",")[0],
        this.location.receiveLocation.split(",")[1]
      );
      var marker = new BMap.Marker(point, { title: "aaa" }); // 创建标注

      var marker1 = new BMap.Marker(point1); // 创建标注

      var polyline = new BMap.Polyline([point, point1], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      });
      map.addOverlay(polyline);

      marker.addEventListener("click", ()=> {
        this.createWindow("发件人地址", this.orderInfo.senderProvinceId+" "+this.orderInfo.senderCityId+" "+this.orderInfo.senderCountyId+" "+this.orderInfo.senderAddress, point);
      });
       marker1.addEventListener("click", ()=>{
        this.createWindow("收件人地址", this.orderInfo.receiverProvinceId+" "+this.orderInfo.receiverCityId+" "+this.orderInfo.receiverCountyId+" "+this.orderInfo.receiverAddress, point1);
      });

      map.addOverlay(marker);
      map.addOverlay(marker1); // 将标注添加到地图中
    },
    createWindow(title, content, point) {
      var opts = {
        width: 200, // 信息窗口宽度
        height: 80, // 信息窗口高度
        title: title, // 信息窗口标题
      };
      var infoWindow = new this.BMap.InfoWindow(content, opts); // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point);
    },
    // getJuli() {
    //   var point = new BMap.Point(112.1, 26.915);
    //   var point1 = new BMap.Point(112.2, 24.915);
    //   alert(this.map.getDistance(point, point1) / 1000 + "km");
    // },

    // guihua(){
    //         var point = new BMap.Point(112.1, 26.915);
    //         var point1 = new BMap.Point(112.2, 24.915);
    //         var driving = new BMap.DrivingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true}});
    //         driving.search(point, point1);
    // }
  },
  created() {
    this.orderInfo = this.$route.params.orderInfo;
    this.location = this.orderInfo.orderLocation;
    this.center.lng = this.location.sendLocation.split(",")[0];
    this.center.lat = this.location.sendLocation.split(",")[1];
   
  },
};
</script>

<style>
.map {
  height: 580px;
  width: 100%;
}
</style>